<template>
	<view class="container">
		<es-cell-list  marginTop="50rpx">
			<es-cell-item title="城市"  @click="onShowPopup"  placeholder="请选择城市" :value="value"></es-cell-item>
		</es-cell-list>
		<es-cell-list marginTop="30rpx" title="禁用定位">
			<es-cell-item title="城市"  @click="onShowPopup(false)"  placeholder="请选择城市" :value="value"></es-cell-item>
		</es-cell-list>
		<es-cell-list marginTop="30rpx" title="设置高度" >
			<es-cell-item title="城市"  @click="onShowPopup(true,'400rpx')"  placeholder="请选择城市" :value="value"></es-cell-item>
		</es-cell-list>
		
	
		<!-- 地区选择 -->
		<es-filter-area  
		 :show="showPopup" :value="value" :bottom-popup="true" :height="height" :background="background"
		 :enable-location="enableLocation" :zIndex="zIndex"
		 @confirm="onAreaChange"  @close="showPopup =false"></es-filter-area>
	</view>
</template>

<script>
	// import esFilterArea from '@/components/es-filter-area/es-filter-area';
	export default {
		components:{
			// esFilterArea
		},
		data(){
			return {
				value:"",
				showPopup:false,
				value:"",
				maskHeight:0,
				height:"800rpx",
				background:"#ffffff",
				enableLocation:true,
				zIndex:999,
			}
		},
		methods:{
			onShowPopup(enableLocation=true,height='800rpx'){
				this.enableLocation = enableLocation;
				this.height = height;
				this.showPopup = true;
			},
			onAreaChange(e){
				this.value = e.name;
				this.showPopup = false;
			}
		},
		onShareTimeline() {
			return {
				title: '组件-地区筛选',
				imageUrl: "/static/images/logo.png",
			}
		},
		onShareAppMessage() {
			return {
					title: '组件-地区筛选',
				imageUrl: "/static/images/logo.png",
			}
		},
	}
</script>

<style>
	/* #ifndef APP-NVUE */
	page{
		background-color: #f6f8fb;
	}
	/* #endif */
	.container {
		width: 750rpx;
		height: 100vh;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
	}
</style>